[playerId] page.tsx

0% Statements 0/100

0% Branches 0/1

0% Functions 0/1

0% Lines 0/100

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101

'use client'

import Link from 'next/link'
import { AppNavBar } from '@/components/AppNavBar'
import {
  PostcardsSection,
  CelebrationSongsSection,
  EuclidCreationsSection,
} from '@/components/my-stuff/PlayerStuffSections'
import { useUserPlayers } from '@/hooks/useUserPlayers'
import { css } from '../../../../../styled-system/css'
import { vstack, hstack } from '../../../../../styled-system/patterns'

interface Props {
  params: { playerId: string }
}

export default function PlayerStuffPage({ params }: Props) {
  const { playerId } = params
  const { data: players = [] } = useUserPlayers()

  const player = players.find((p) => p.id === playerId)
  const emoji = player?.emoji ?? '🧒'
  const name = player?.name ?? '…'

  return (
    <div
      data-component="player-stuff-page"
      className={vstack({ alignItems: 'stretch', minH: '100vh', bg: 'gray.50' })}
    >
      <AppNavBar
        navSlot={
          <Link
            href="/my-stuff"
            style={{
              fontSize: '14px',
              fontWeight: 600,
              color: 'rgba(55, 65, 81, 1)',
              textDecoration: 'none',
            }}
          >
            ← My Stuff
          </Link>
        }
      />

      <main
        className={vstack({
          alignItems: 'stretch',
          maxW: '860px',
          w: '100%',
          mx: 'auto',
          px: '16px',
          pt: 'calc(var(--app-nav-height) + 32px)',
          pb: '48px',
          gap: '40px',
        })}
      >
        {/* Player header */}
        <div className={hstack({ gap: '16px', alignItems: 'center' })}>
          <span
            className={css({
              fontSize: '52px',
              lineHeight: '1',
              w: '72px',
              h: '72px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              bg: 'white',
              borderRadius: '50%',
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
              border: '1px solid token(colors.gray.200)',
            })}
          >
            {emoji}
          </span>
          <div className={vstack({ alignItems: 'flex-start', gap: '2px' })}>
            <h1
              className={css({
                fontSize: '26px',
                fontWeight: '800',
                color: 'gray.900',
              })}
            >
              {name}&apos;s Stuff
            </h1>
            <span className={css({ fontSize: '13px', color: 'gray.500' })}>
              Songs, creations & postcards
            </span>
          </div>
        </div>

        <PostcardsSection playerId={playerId} />
        <CelebrationSongsSection playerId={playerId} />
        <EuclidCreationsSection playerId={playerId} />
      </main>
    </div>
  )
}